<template>
  <div>
    <div v-if="moreEvalua" class="biddingEvalua">
      {{ evaluateType === 1 ? '招标阶段' : evaluateType === 2 ? '合同阶段' : '验收阶段' }}-供应商评价
    </div>
    <div :style="moreEvalua ? 'margin-top:30px' : ''" v-if="!isCon">
      <i class="iconfont icon-tishi"></i>
      <span style="margin-left: 10px" class="tip" v-if="evaluateType == 1"
        >仅在创建定标、中标或流标后，对供应商在招标阶段的表现进行评价。</span
      >
      <span style="margin-left: 10px" class="tip" v-else-if="evaluateType == 2"
        >仅在合同成立后，对供应商在合同履行阶段的表现进行评价。</span
      >
      <span style="margin-left: 10px" class="tip" v-else>仅在合同成立后，对该合同内的单个订单的表现进行评价。</span>
    </div>
    <div class="company_wrap" v-if="enterpriseName || evaluaObj.enterpriseName">
      <span class="icon-box">
        <i class="iconfont icon-jurassic_company"></i>
      </span>
      <span class="companyName">{{ enterpriseName || evaluaObj.enterpriseName }}</span>
      <label for="">
        综合评分：
        <span style="color: #fa7355"> --</span>
      </label>
    </div>
    <div class="evalua-box">
      <div>
        <h1>星级打分</h1>
        <el-form label-width="100px" style="margin: 7px 0">
          <div v-if="evaluateType === 1">
            <el-form-item required label="履约能力: " style="margin-bottom: 0 !important">
              <el-rate v-model="evaluaObj.biddingAbilityPerformance" :max="5" show-score> </el-rate>
            </el-form-item>
            <el-form-item required label="报价合理性: " style="margin-bottom: 0 !important">
              <el-rate v-model="evaluaObj.biddingRationQuote" :max="5" show-score> </el-rate>
            </el-form-item>
            <el-form-item required label="招标配合度: " style="margin-bottom: 0 !important">
              <el-rate v-model="evaluaObj.biddingCooperationDegree" :max="5" show-score> </el-rate>
            </el-form-item>
            <el-form-item required label="企业信誉: " style="margin-bottom: 0 !important">
              <el-rate v-model="evaluaObj.biddingEnterpriseReputation" :max="5" show-score> </el-rate>
            </el-form-item>
            <el-form-item required label="报价真实性: " style="margin-bottom: 0 !important">
              <el-rate v-model="evaluaObj.biddingTruthQuote" :max="5" show-score> </el-rate>
            </el-form-item>
          </div>
          <div v-else-if="evaluateType === 2">
            <el-form-item required label="服务态度: " style="margin-bottom: 0 !important">
              <el-rate v-model="evaluaObj.contractServiceAttitude" :max="5" show-score> </el-rate>
            </el-form-item>
            <el-form-item required label="产品质量: " style="margin-bottom: 0 !important">
              <el-rate v-model="evaluaObj.contractProductQuality" :max="5" show-score> </el-rate>
            </el-form-item>
            <el-form-item required label="企业信誉: " style="margin-bottom: 0 !important">
              <el-rate v-model="evaluaObj.contractEnterpriseReputation" :max="5" show-score> </el-rate>
            </el-form-item>
            <el-form-item required label="履约能力: " style="margin-bottom: 0 !important">
              <el-rate v-model="evaluaObj.contractAbilityPerformance" :max="5" show-score> </el-rate>
            </el-form-item>
            <el-form-item required label="项目配合度: " style="margin-bottom: 0 !important">
              <el-rate v-model="evaluaObj.contractProjectCoordination" :max="5" show-score> </el-rate>
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item required label="履约能力: " style="margin-bottom: 0 !important">
              <el-rate v-model="evaluaObj.checkAbilityPerformance" :max="5" show-score> </el-rate>
            </el-form-item>
            <el-form-item required label="送货态度: " style="margin-bottom: 0 !important">
              <el-rate v-model="evaluaObj.checkDeliveryAttitude" :max="5" show-score> </el-rate>
            </el-form-item>
            <el-form-item required label="产品质量: " style="margin-bottom: 0 !important">
              <el-rate v-model="evaluaObj.checkProductQuality" :max="5" show-score> </el-rate>
            </el-form-item>
            <el-form-item required label="服务态度: " style="margin-bottom: 0 !important">
              <el-rate v-model="evaluaObj.checkServiceAttitude" :max="5" show-score> </el-rate>
            </el-form-item>
            <el-form-item required label="供货周期: " style="margin-bottom: 0 !important">
              <el-rate v-model="evaluaObj.checkSupplyCycle" :max="5" show-score> </el-rate>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="item-right">
        <h1>根据供应商的表现选择标签</h1>
        <div style="margin-top: 20px">
          <el-checkbox-group v-model="checkboxGroup4" @change="checkBoxChange">
            <el-checkbox-button v-for="item in labels" :label="item.labelId" :key="item.labelId" class="checkBtn">
              {{ item.labelName }}
            </el-checkbox-button>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <h1>评价内容<span>（您的评价可能成为平台上其他企业的参考哦～）</span></h1>
    <el-input
      type="textarea"
      :autosize="{ minRows: 3 }"
      placeholder="请输入评价内容"
      v-model.trim="evaluaObj.evaluateContent"
      style="margin-top: 20px"
    >
    </el-input>
    <div class="evabtn" v-if="moreEvalua">
      <el-button style="width: 130px" class="commonBtn1" @click="saveName"> 提交评价 </el-button>
    </div>
    <dialog-footer-button
      style="margin-top: 20px"
      @close="close"
      @saveName="saveName"
      v-if="!moreEvalua"
    ></dialog-footer-button>
  </div>
</template>

<script>
import dialogFooterButton from './dialogFooterButton.vue'
export default {
  components: { dialogFooterButton },
  props: {
    isCon: {
      type: Boolean,
      default: false
    },
    moreEvalua: {
      type: Boolean,
      default: false
    },
    bidEnterpriseId: {
      type: [String, Number]
    },
    bidid: {
      type: [String, Number]
    },
    evaluateType: {
      type: Number
    },
    evaObj: {
      type: Object
    },
    enterpriseName: {
      type: String
    }
  },
  data() {
    return {
      checkboxGroup4: [],
      evaluaObj: {},
      labels: []
    }
  },
  watch: {
    evaObj() {
      this.evaluaObj = this.evaObj
      this.labels = this.evaObj.labels
      this.checkboxGroup4 = [...this.evaObj.selectedIabels]
    }
  },
  mounted() {
    if (!this.moreEvalua) {
      this.getData()
    } else {
      this.evaluaObj = this.evaObj
      this.labels = this.evaObj.labels
      this.checkboxGroup4 = this.evaObj.selectedIabels || []
    }
  },
  methods: {
    saveName() {
      let obj = {}
      let data = null
      obj = {
        ...this.evaluaObj,
        evaluateRecordId: this.bidid,
        labeiId: this.checkboxGroup4,
        purchaserId: +localStorage.getItem('enterpriseId')
      }
      let url = ''
      if (this.evaluateType == 1) {
        url = '/evaluate/biddingEvaluate'
        data = [obj]
      } else if (this.evaluateType == 2) {
        url = '/evaluate/contractEvaluate'
        data = obj
      } else if (this.evaluateType == 3) {
        url = '/evaluate/orderEvaluate'
        data = obj
      }
      this.$https({
        method: 'post',
        url: url,
        data: data
      })
        .then(res => {
          if (res.code == 0) {
            this.$message.success('评价成功')
            this.close()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    close() {
      this.$emit('close')
    },
    getData() {
      this.$https({
        method: 'post',
        url: '/evaluate/listEvaluateInfo',
        data: {
          enterpriseId: this.bidEnterpriseId,
          evaluateRecordId: this.bidid,
          evaluateType: this.evaluateType
        }
      })
        .then(res => {
          if (res.code === 0) {
            this.labels = res.data[0].labels || []
            this.checkboxGroup4 = res.data[0].selectedIabels || []
            this.evaluaObj = res.data[0]
            // if (this.evaluateType === 1) {
            //   this.evaluaObj = res.data[0]
            // } else if (this.evaluateType === 2) {
            // }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    checkBoxChange(val) {
      // console.log(val)
    }
  }
}
</script>
<style lang="less" scoped>
.commonFrom {
  margin-top: 7px;
  width: 88%;
  .el-form-item {
    width: 40% !important;
    margin-bottom: 7px !important;
  }
  .form-item {
    width: 100% !important;
    /deep/.el-form-item__content {
      display: flex;
    }
    .el-input {
      width: 260px;
    }
  }

  .performance_text {
    color: #999;
    font-size: 14px;
  }
  .icon-guanbianniu {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
  }
  .icon-guanbianniu:hover {
    color: #fa7355;
  }
}
h1 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  padding-left: 10px;
  border-left: 4px solid #fa7355;
  span {
    font-weight: normal;
    color: #999;
  }
}
.ty {
  color: #ff3d3d;
}
.evalua-box {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  .item-right {
    width: 530px;
  }
  .checkBtn {
    margin-right: 20px;
    margin-bottom: 20px;
    /deep/ .el-checkbox-button__inner {
      background: #f0f1f2;
      border: 1px solid #f0f1f2;
    }
  }
  /deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
    box-shadow: none;
    background: #fff4f2;
    color: #fa7355;
    border: 1px solid #fa7355;
  }
  /deep/.el-checkbox-button__inner:hover {
    color: #fa7355;
  }
  /deep/ .el-rate__icon {
    font-size: 24px;
  }
  /deep/ .el-rate,
  /deep/.el-rate__item {
    display: flex;
    align-items: center;
    height: 40px;
  }
}
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #999999;
  margin-right: 10px;
}
.company_wrap {
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.biddingEvalua {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}
.companyName {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  margin-right: 20px;
}
.icon-tishi {
  font-size: 16px;
  color: #fa7355;
}
.tip {
  font-size: 14px;
  font-weight: 400;
  color: #fa7355;
}
.evabtn {
  margin: 40px 0 5px;
  display: flex;
  justify-content: center;
}
</style>
